<template>
	<view>
		<view class="pyq-detail-box">
			<view class="pyq_avatar">
				<image :src="pyqInfo.avatar"></image>
			</view>
			<view class="pyq-body">
				<uv-text bold size="16" :text="`${pyqInfo.name}`"></uv-text>
				<view class="pyq-body_title text-red ">
					<text>{{pyqInfo.befortime}}</text>
					<text class="margin-lr-xxs">|</text>
					<text class="text-bold">{{pyqInfo.viewcount}}</text>
					<text>浏览</text>
				</view>
				<view class="pyq-body_content">
					<text  v-if="pyqInfo.istop=='1'" class="pyq-top">置顶</text>
					<text>{{pyqInfo.content}}</text>
				</view>

				<uv-album v-if="pyqInfo.imglist.length" :urls="pyqInfo.imglist" multipleSize="180rpx"></uv-album>

				<view class="pyq-body_foot">
					<!-- <uv-icon class="commit" name="chat-fill" :label="`评论 (${pyqInfo.commcount})`"></uv-icon> -->
					<view class="right">
						<uv-button icon="phone-fill" iconColor='#ff3600' :customStyle="btncust" text="打电话" @click="callphone"></uv-button>
						<uv-button icon="weixin-fill" iconColor="#07c160" :customStyle="btncust" text="加微信" @click="copywx"></uv-button>
						<uv-button icon="share-fill" iconColor="#3d9eff" :customStyle="btncust" open-type="share" text="分享"></uv-button>
					</view>
				</view>
				<!-- <view>
					<uv-input v-model="commitmsg" placeholder="评论">
						<template v-slot:suffix>

							<uv-button @click="sendcommt" text="发送" type="success"></uv-button>
						</template>
					</uv-input>
				</view> -->
				<!-- <view class="pyq-commit-box">
					<view v-for="item in commitlist" :key="item.id" class="pyq-commit-box_item">
						<text class="commit-item_user">{{item.name}} ：</text><text
							class="commit-item_commit">{{item.content}}</text>
					</view>
				</view> -->
			</view>
		</view>
		<fy-user-desc :userInfo="userInfo"></fy-user-desc>
		<fy-user-nav :userInfo="userInfo"></fy-user-nav>
	</view>
</template>

<script>
	import { queryPyqComment, pyqComment, queryUserInfo, queryPyqInfo } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import{ timetobefor} from '@/common/tools.js'
	export default {
		data() {
			return {
				total: 0,
				pyqInfo: {
					imglist: [] 
				},
				queryForm: {
					start: 0,
					length: 10,
					id: 0

				},
				btncust: {
					padding: '0 5px',
					border: 'none'
				},
				urlparm: { id: 0 },
				commitlist: [],
				commitmsg: '',
				userInfo: {}

			}
		},
		onLoad(option) {
			this.urlparm = option
			this.fetchData()
			//this.fetchcomment()
			this.fetchUser()
		},
		methods: {
			callphone() {

				uni.makePhoneCall({ phoneNumber: this.userInfo.phone })
			},
			copywx() {
				uni.setClipboardData({
					data: this.userInfo.wxno,
					showToast: true
				})
			},
			fetchUser() {
				queryUserInfo(this.urlparm.userid).then(res => {
					const { data } = res
					data.userimgsrc = data.imgsrc ? baseconfig.api_url + data.imgsrc : ''
					var t = data.ipplace.split(' ')
					data.area = t[2]
					this.userInfo = data
				})
			},
			sendcommt() {
				var parm = { id: this.urlparm.id, content: this.commitmsg }
				pyqComment(parm).then(res => {
					const { code } = res
					if (code === 200) {
						this.commitmsg = ''
						this.fetchcomment()
					}
				})
			},
			fetchData() {
				queryPyqInfo(this.urlparm.id).then(res => {
					const { data } = res
					data.avatar = baseconfig.api_url + data.userimgsrc
					data.imglist = []
					if (data.imgsrc) {
						var _list = data.imgsrc.split(',')
						_list.forEach(imgarr => {
							data.imglist.push(baseconfig.api_url + imgarr)
						})
					}
					data.befortime=timetobefor(data.createtime)
					this.pyqInfo = data
				})
			},
			fetchcomment() {
				this.queryForm.id = this.urlparm.id
				queryPyqComment(this.queryForm).then(res => {
					const { rows } = res.data
					this.commitlist = rows
				})
			}

		}
	}
</script>

<style lang="scss">
	.pyq-detail-box {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		padding: 20upx;

		.pyq_avatar {
			padding: 20upx 0 0 0;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
		}

		.pyq-body {
			padding: 20upx 0 0 20upx;
			flex: 1;

			&_title {
				font-size: 24upx;
				color: #909399;
			}

			&_content {
				margin:20upx 0;

				.pyq-top {
					align-items: center;
					background-color: #ff3600;
					color: #fff;
					padding: 4upx 6upx;
					font-size: 24upx;
					border-radius: 8upx 0;
					margin-right: 10upx;
				}
			}

			&_foot {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.commit {
					flex: 1;
				}

				.right {
					display: flex;
					justify-content:flex-end;
					width:100%;
				}
			}

			&_commit {
				flex: 1;
			}

		}
	}

	.pyq-commit-box {
		margin: 20upx 0;
		background-color: #F8F8F8;

		&_item {
			padding: 4upx 10upx;

			.commit-item_user {
				color: #3c9cff;
			}
		}
	}
</style>